{% extends 'blog_main.html' %}
{% block title%}博客-静心之地{% endblock %}
{% block css%}{% endblock %}
{% block body%}
<div class="">
    <div id="main" class="row" style="margin:50px 0 0 0;">
        <!--<div class="col-3"><style="background-color:red;width: 80%;margin:auto;">
            <div id="left-top" style="background-color:seagreen;width: 90%;margin:0 0 10px 30px;">
              <div id="testtop" style="height:100px;background-color:orange;">
                <div id="test" style="float:left; z-index:1;height:50px;width: 50%;position: relative;background-color:whitesmoke;margin:80px 25% auto 25%;">i am a img.</div>
              </div>
              <div id="testbottom" style="height:100px;background-color:white;"></div>
              
            </div>
            <div id="left-middle" style="background-color:palegreen;width: 90%;margin:100px 0 0 30px;">left-middle</div>
        </div>-->
        <div class="col-2"></div>
        <div class="col-7">
            <!--<div id="center-top" style="height:50px;background-color:white;margin:0 0 10px 0;">
                <nav class="navbar bg-light">
                  <div class="container-fluid">
                    {% if username %}
                    <a class="navbar-brand">
                    {{ username }}</a>
                    {% else %}
                    <a href="publish/" class="navbar-brand" target="_blank">Login</a>
                    {% endif %}
                    <a href="publish/" class="d-flex" target="_blank">+发布文章</a>
                  </div>
                </nav>
            </div>-->
            <div id="center-middle">
                {% for article in articles%}
                <div class="card text-dark bg-light mb-1" >
                    <div class="card-header">{{ article.createDate }}</div>
                    <div class="card-body">
                      <a href="javascript:void(0);" class="card-title" id='{{ article.article_id }}'>{{ article.title }}</a>
                      <div class="col-12 text-truncate">
                        <p class="card-text"></p>
                      </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="col-3">
            <div id="right-top" style="width: 90%;margin:0 0 50px 0;">
                <div class="card">
                  <img src="/static/img/card1.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <p class="card-text"></p>
                  </div>
                </div>
                <div class="card">
                 <img src="/static/img/card2.jpg" class="card-img-top" alt="...">
                 <div class="card-body">
                   <p class="card-text"></p>
                 </div>
               </div>
            </div> 
            <!--<div id="right-middle" style="background-color:gray;width: 90%;margin:20px 0 0 0;">right-middle</div>-->
        </div>
    </div>
</div>
{% endblock %}
{% block javascript%}
    $(function(){
        $("a[class='card-title']").each(function(index,element){
            $(element).click(function(){
                window.open('read/'+$(this).attr('id'),'_target');
            });
        });
    });
{% endblock %}